<!--预约订单详情-->
<template> 
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head h129">
      <div class="dt-head-fix">
        <detail-header 
          :status="'请预约订单'"
          :id="todolist"></detail-header>
        <div class="detail-supply">
          <i class="iconfont icon-supplier ft17"></i>
          {{todolist.SupplierName}}
        </div>
      </div>
    </div>

    <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
      <voice-msg :id="todolist"></voice-msg>
    </div>
    <div class="detail-goods-list">
      <div class="displayflex list-goods-warp" v-for="item in tododetail">
        <div class="pic">
          <img :src="item.PictContent | filterImgUrl">
        </div>
        <div class="msg flex1">
          <p class="ft17">{{item.SupplierGoodsName}}</p>
          <p>{{item.SupplierGoodsSpec}}</p>
          <p>{{item.Producer}}</p>
          <em class="def-color">共{{item.SupplierPoQty}}{{item.SupplierUnit}}</em>
        </div>
      </div>
      <p class="detail-mark ft17" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{todolist.Memo}}</i></p>
      <div class="detail-num">
        <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{(amount || todolist.DetailSum) | fmoney}}</span>
      </div>
    </div>

    <div class="form-wrap mb30">
      <div class="form-choice line">
        <datetime v-model="formDate.arriveTime" title="预计送达区间" placeholder="点击选择"></datetime>
      </div>
      <div class="form-choice line">
        <datetime v-model="formDate.endTime" title="至" placeholder="点击选择"></datetime>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">备注</div> 
          <div class="ipt flex1"><textarea type="text" placeholder="请输入备注信息" class="form-txtarea"></textarea></div>
        </div>
      </div>
    </div>

    <div class="detail-customs">
      <p>下单时间：{{todolist.BillDate | timeshort}}</p>
    </div>
    <div class="detail-bottom displayflex">
      <div class="flex1 btn-grp">
        <div class="btn" @click="goNext">订单预约</div>
      </div>
    </div>
  </div>
</template>

<script>
import detailHeader from '@/components/core/header/detail_header.vue';
import voiceMsg from '@/components/share/voiceMsg/voicemsg.vue';
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name:'appointDetail',
  components: {
    detailHeader,
    voiceMsg,
    appHeader
  },
  data() {
    return {
      tododetail:[],
      itemsImg:[],
      itemsVoice:[],
      todolist:[],
      formDate:{
        arriveTime:'',
        endTime:''
      }
    }
  },
  computed:{
    amount(){
      var total=0;
      for(var i = 0;i<this.tododetail.length;i++){
        total = total+this.tododetail[i].Amount;
      };
      return total;
    },
    guid(){
      return this.$route.query.id;
    }
  },
  created(){
    
  },
  mounted() {
    this.$nextTick(function() {

    })
  },
  methods: {
    goNext(){
      this.$router.push({
        path:'/order/choiceMan'
      })
    }
  }
}
</script>